<template>
  <div class="goodsDetail-container">
    <div class="card" @click="previewImage">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in thumb" :key="index">
          <img :src="item.src" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="card">
      <div class="price">
        <span class="sell_price">&yen; {{ goodsMessage.sell_price }}</span>
        <span class="market_price">&yen; {{ goodsMessage.market_price }}</span>
      </div>
      <div class="title van-multi-ellipsis--l2">
        {{ goodsMessage.title }}
      </div>
    </div>
    <div class="card">
      <van-divider content-position="left">介绍</van-divider>
      <div class="content" v-html="goodsMessage.content"></div>
    </div>
    <!-- <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="callPhone" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-button
        type="warning"
        text="加入购物车1"
        @click="toCar"
        color="#be99ff"
      />
      <van-goods-action-button
        type="warning"
        text="立即购买1"
        @click="toBuy"
        color="#7232dd"
      />
    </van-goods-action> -->
    <!-- 
     -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="callPhone" />
      <van-goods-action-icon
        @click="$router.push('/shop')"
        icon="cart-o"
        text="购物车"
        :badge="$store.getters.GetTotalShoppingCarts"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="toCar(true)"
        color="#be99ff"
      />
      <van-goods-action-button
        type="warning"
        text="立即购买"
        @click="toBuy(false)"
        color="#7232dd"
      />
    </van-goods-action>
    <!-- 商品sku -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsMessage.id"
      :hide-stock="sku.hide_inventory"
      :reset-stepper-on-hide="true"
      :show-add-cart-btn="showAddCartBtn"
      @add-cart="AddToCart"
      @buy-clicked="skuBuy"

    >
      <template #sku-messages>
        <div class="card">
          <van-divider>文字</van-divider>
          <div>商品货号：{{ goodsMessage.goods_no }}</div>
          <div>库存：{{ goodsMessage.stock_quantity }}件</div>
          <div>
            上架时间：{{ goodsMessage.add_time | datatime("YYYY-MM-DD") }}
          </div>
        </div>
      </template>
    </van-sku>
  </div>
</template>

<script>
import { fetchGoodsImgs, fetchGoodsMessage } from "@/api/index.js";
import { ImagePreview } from "vant";

export default {
  props: ["id"],
  data() {
    return {
      show: false, //显示弹窗
      thumb: [],
      goodsMessage: {},
      showAddCartBtn: true, //显示skuz是否加入购物车
      sku: {
        //格子里面的数据等
        tree: [],
        price: "", //默认的价格
        stock_num: 100, //商品库存
        hide_inventory: false, //商品库存是否要进行隐藏
      },
      goods: {
        picture: "",
      },
    };
  },
  methods: {
    callPhone() {
      // 询问
      this.$dialog
        .confirm({
          title: "拨打客服电话",
          message: "确定联系客服点击确定即可哦亲亲",
        })
        .then(() => {
          // on confirm  拨打电话
          window.location.href = "tel://" + 13612362023;
        })
        .catch(() => {
          // on cancel
        });
    },
    async _fetchGoodsImgs() {
      let { message } = await fetchGoodsImgs(this.id);
      this.thumb = message;
      // 赋值给sku商品图片
      this.goods.picture = message[0].src;
    },
    async _fetchGoodsMessage() {
      let { message } = await fetchGoodsMessage(this.id);
      //利用正则来进行
      let reg = /\width=['"]\w+['"]\s+/i;
      message.content = message.content.replace(reg, "");
      this.goodsMessage = message;
      this.sku.price = message.sell_price;
      this.sku.stock_num = message.stock_quantity;
    },
    previewImage() {
      // 详情图片的预览
      let imgs = this.thumb.map((item) => item.src);
      ImagePreview({
        images: imgs,
        startPosition: 1,
      });
    },
    //shopingcar
    toCar(showAddCartBtn) {
      this.show = true;
      //显示解构并显示sku中加入的购物车按钮
      this.showAddCartBtn = showAddCartBtn;
    },
    toBuy(showAddCartBtn) {
      //显示sku
      this.show = true;
      this.showAddCartBtn = showAddCartBtn;
    },
    AddToCart(skuData) {
      //准备的购物车商品数据
      console.log(skuData);
      let { goodsId, selectedNum } = skuData;
      //sell_price出售价格
      let { sell_price } = this.goodsMessage;
      let cartItem = {
        id: goodsId,
        number: selectedNum,
        sell_price,
        selected: true,
      };
      //添加vuex进行cunzhu
      console.log(cartItem);
      this.$store.commit("addGoodsToCar", cartItem);
      this.show = false; //隐藏sku的弹窗
    },
    skuBuy(skuData) {
      let { goodsId, selectedNum } = skuData;
      let { sell_price } = this.goodsMessage;
      let cartItem = {
        id: goodsId,
        number: selectedNum,
        sell_price,
        selected: true,
      };
      this.$store.commit("addGoodsToCar", cartItem);
      this.$router.push("/shop");
      console.log("sku 立即购买");
    },
  },
  created() {
    this._fetchGoodsImgs();
    this._fetchGoodsMessage();
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/var.scss";
.goodsDetail-container {
  height: 100vh;
  background: $bgColor;
  padding: 4px;
  .card {
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fff;
    padding: 8px;
    .my-swipe {
      .van-swipe-item {
        height: 240px;
        text-align: center;

        img {
          // width: 100%;
          height: 100%;
        }
      }
    }

    .price {
      .sell_price {
        color: #fa865d;
        font-size: 20px;
        margin-right: 20px;
      }
      .market_price {
        color: #666;
        font-size: 14px;
      }
    }

    .title {
      color: #333;
      font-weight: 500;
    }

    .content {
      color: #666;
      ::v-deep img {
        width: 100%;
      }
    }
  }
}
</style>
